Ext.define('CAFE.view.Dashboard.Dashboard' ,{
	 extend: 'Ext.panel.Panel',
	    alias: 'widget.dashboard',
	    border: false,
	    closable: true,
	    title : 'DASHBOARD',
	    layout : {
	        type : 'table',
	        columns : 2
	    },
	    items:[{
	    	xtype: 'panel',
	    	title: '<font style="color : white">Montly Unit Sales</font>',
	    	width: 545,
	    	height: 240,
	    	border:false,
	    	html :'<div id = "multiSeries"> </div>',
	    	margin : '8 0 0 8',
	    	header :{
	    		    height:30,
	    		    style: 'background-image:url(./images/blue-header.png)',
	    		    
	    	},
	    	listeners : {
				afterrender : function() {
					 if (FusionCharts("Column3D")) FusionCharts("Column3D").dispose();
					 var myChart = new FusionCharts( "../EXTJS5/Charts/Column3D.swf", "Column3D", "545", "220", "0", "1");
					 myChart.render('multiSeries');
					 myChart.setJSONUrl("./script/chart3d.json");
				}

			}
	    	
	    
	    },{
	    	xtype: 'panel',
	    	title: '<font style="color : white">Product Sales</font>',
	    	width: 545,
	    	height: 240,
	    	border:false,
	    	html :'<div id = "columnd2D"> </div>',
	    	margin : '8 0 0 20',
	    	header :{
			    height:30,
			    style: 'background-image:url(./images/blue-header.png)',
	    	},
	    	listeners : {
				afterrender : function() {
					 if (FusionCharts("Doughnut3D")) FusionCharts("Doughnut3D").dispose();
					var Chart1 = new FusionCharts("../EXTJS5/Charts/Doughnut3D.swf", "Doughnut3D","545", "220", "0", "1");
					Chart1.render('columnd2D');
					Chart1.setJSONUrl("./script/Doughnut3D.json");

				}

			}
	    
	    },{
	    	xtype: 'panel',
	    	title: '<font style="color : white">Daily Visit</font>',
	    	width: 545,
	    	height: 240,
	    	border:false,
	    	margin : '20 0 0 8',
	    	html :'<div id = "columnd2D2"> </div>',
	    	header :{
			    height:30,
			    style: 'background-image:url(./images/blue-header.png)',
	    	},
	    	listeners : {
				afterrender : function() {
					 if (FusionCharts("MSLine")) FusionCharts("MSLine").dispose();
					var Chart1 = new FusionCharts("../EXTJS5/Charts/MSLine.swf", "MSLine","545", "220", "0", "1");
					Chart1.render('columnd2D2');
					Chart1.setJSONUrl("./script/MSLine.json");

				}

			}
	    
	    },{
	    	xtype: 'panel',
	    	title: '<font style="color : white">Country Comparison</font>',
	    	width: 545,
	    	height: 240,
	    	border:false,
	    	html :'<div id = "StackedColumn2D"> </div>',
	    	margin : '20 0 0 20',
	    	header :{
			    height:30,
			    style: 'background-image:url(./images/blue-header.png)',
	    	},
	    	listeners : {
				afterrender : function() {
					 if (FusionCharts("MSBar2D")) FusionCharts("MSBar2D").dispose();
					var Chart1 = new FusionCharts("../EXTJS5/Charts/MSBar2D.swf ", "MSBar2D","545", "220", "0", "1");
					Chart1.render('StackedColumn2D');
					Chart1.setJSONUrl("./script/MSBar2D.json");

				}

			}
	    
	    }]
});